<template>
  <div class="sale">


    <div class="guide">
      <img src="../../assets/sale/b1.png" alt="">
    </div>

    <div class="from-list">

      <div class="list clearfix">
        <span class="name-min">寄卖人</span>
        <input type="text" placeholder="姓名" class="price" v-model="saleData.name">
      </div>
      <div class="list clearfix">
        <span class="name-min">手机号码</span>
        <input type="text" placeholder="收货人电话" class="price" v-model="saleData.phone">
      </div>
      <div class="list clearfix">
        <span class="name-min">省市区</span>
        <!--<input type="text" placeholder="选择省、市、区" class="price">-->
        <div class="city-picker-span-box">
          <input id="city-picker3" class="price form-control" readonly type="text" placeholder="填写详细地址" value="" data-toggle="city-picker">
        </div>
      </div>
      <div class="list clearfix">
        <span class="name-min">详细地址</span>
        <input type="text" placeholder="填写详细地址" class="price"  v-model="saleData.address">
      </div>

      <div class="next-btn">
        <mt-button type="danger" size="large" v-on:click="setpFn('/sale3')">下一步</mt-button>
      </div>
    </div>



  </div>
</template>

<script type="text/javascript" src="./static/js/city-picker.data.js"></script>
<script type="text/javascript" src="./static/js/city-picker.js"></script>

<script>
  import { Toast } from 'mint-ui';

  export default {
    name: 'Sale',
    data () {
      return {
        saleData: {
          name:'',
          phone:'',
          address:'',
          province_id:'',
          city_id:'',
          district_id:''
        }
      }
    },
    mounted:function(){

      var saleData = sessionStorage.getItem('saleData') && JSON.parse(sessionStorage.getItem('saleData'));
      $.extend(this.saleData,saleData);

      $('[data-toggle="city-picker"]').citypicker();

      setTimeout(function(){
        $('.city-picker-span').css({'width':'9rem','borderBottom': '0','background': 'none'});
        $('.city-picker-dropdown').css('top','3rem');

      },100)

    },
    components: {
    },
    methods: {
      showpopup(){
        this.popupVisible = true;
      },
      gotoAddress(path){
        this.$router.push(path)
      },
      setpFn:function(path){

        var province_id = $('.city-picker-span-box .select-item').eq(0).attr('data-code') || '';
        var city_id = $('.city-picker-span-box .select-item').eq(1).attr('data-code') || '';
        var district_id = $('.city-picker-span-box .select-item').eq(2).attr('data-code') || '';

        this.saleData.province_id = province_id;
        this.saleData.city_id = city_id;
        this.saleData.district_id = district_id;

        var saleData =this.saleData;

        if(saleData.name == '' || saleData.phone == '' ||saleData.address == '' || saleData.province_id == '' ||saleData.city_id == '' || saleData.district_id == '')
        {
          Toast('请认真填写数据');
          return;
        }
        //        验证手机号
        var reg = /^1[34578]\d{9}$/;
        var a =saleData.phone;
        if(reg.test(a) == false){
          Toast('手机号码不正确');
          return;

        }
        //        结束

        console.log(saleData);



        var oldsaleData = '';
        if(sessionStorage.getItem('saleData')){
          oldsaleData = JSON.parse(sessionStorage.getItem('saleData'))
        }
        $.extend(oldsaleData,saleData);

        console.log(oldsaleData);
        sessionStorage.setItem('saleData',JSON.stringify(oldsaleData));

        this.$router.push(path)

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


  .city-picker-span-box{

    display: inline-block;
    width: 9rem;
    height: 1.5rem;
    overflow: hidden;
    vertical-align: middle;
  }

  .sale{
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .guide{
    margin-top: 0.5rem;
  }
  .guide img{
    width: 100%;
  }

  .from-list{
    margin-top: 0.5rem;
  }
  .list{
    margin-top: 0.6rem;
    background: #f5f5f5;
    border-radius: 0.75rem;
    font-size: .6rem;
    color:#707070;
    padding: 0.1rem;
  }
  .list .name-min{
    display: inline-block;
    vertical-align: middle;
    padding: 0.35rem 0;
  }
  .list .right-ico{ float: right;}
  .list .right-ico img{
    width: 0.45rem;
    margin-top: 0.1rem;
    margin-right: 0.5rem;
  }
  .list .value{ padding-left: 0.3rem;}
  .list .ico img{ width: 0.5rem; margin-left: 0.5rem; margin-top: 0.1rem; margin-right: 0.1rem;}
  .list .name{
    padding-left: 0.5rem;
    display: inline-block;

  }
  .list .name-min{
    padding-left: 1rem;
    text-align: left;
    display: inline-block;
    width: 3rem;

  }
  .list .price{ font-size: .5rem; display: inline-block; vertical-align: middle; width: 9rem;}
  .list .price::-webkit-input-placeholder {
    color:#c2c2c2;
  }
  .img-list-box{
    padding: 0.5rem 0.3rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .sub-tt{padding: 0.3rem 0 0.5rem; color:#707070;}
  .img-add{
    display: inline-block;
    width: 2.5rem;
    height:2.5rem;
  }
  .img-add img{
    width: 100%;
    height: 100%;
  }
  .area-box textarea{ width: 12rem; height: 4rem; margin-top: 0.3rem;}
  .next-btn{
    padding-top: 2.5rem;
  }
  .mint-popup-3 {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  .mint-popup-3 .mint-button {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
  }
</style>
